<template>
  <el-descriptions border class="margin-top" :column="4" title="工艺路线详情">
    <template #extra>
      <div class="morenQuyu">
        <span>默认&nbsp;&nbsp;</span>
        <el-switch
          v-model="state.isDefault"
          active-text="是"
          inactive-text="否"
          inline-prompt
        />
      </div>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item" @click="test">
          <el-icon style="margin-right: 6px">
            <Clock />
          </el-icon>
          存货编码
        </div>
      </template>
      {{
        props.value.length === 0 ? '请查询' : props.value[props.xuhao].invcode
      }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon style="margin-right: 6px">
            <Files />
          </el-icon>
          存货名称
        </div>
      </template>
      {{
        props.value.length === 0 ? '请查询' : props.value[props.xuhao].invname
      }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Box />
          </el-icon>
          规格
        </div>
      </template>
      {{
        props.value.length === 0 ? '请查询' : props.value[props.xuhao].invspec
      }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon style="margin-right: 6px">
            <Paperclip />
          </el-icon>
          型号
        </div>
      </template>
      {{
        props.value.length === 0
          ? '请查询'
          : props.value[props.xuhao].invtype == null
          ? '该产品没有型号'
          : props.value[props.xuhao].invtype
      }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon style="margin-right: 6px">
            <Coin />
          </el-icon>
          计量单位
        </div>
      </template>
      {{
        props.value.length === 0 ? '请查询' : props.value[props.xuhao].measName
      }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon style="margin-right: 6px">
            <CollectionTag />
          </el-icon>
          来自
        </div>
      </template>
      <el-tag size="small">
        {{
          props.value.length === 0
            ? '请查询'
            : props.value[props.xuhao].source == 'yt'
            ? '外部系统'
            : 'MOM'
        }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item @click="test">
      <template #label>
        <div class="cell-item">
          <el-icon style="margin-right: 6px">
            <Picture />
          </el-icon>
          版本号
        </div>
      </template>
      {{
        props.value.length === 0 ? '请查询' : props.value[props.xuhao].version
      }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon style="margin-right: 6px">
            <Chicken />
          </el-icon>
          版本描述
        </div>
      </template>
      {{
        props.value.length === 0
          ? '请查询'
          : props.value[props.xuhao].versionDesc
      }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
  import {
    Clock,
    Files,
    Box,
    Paperclip,
    CollectionTag,
    Coin,
    Picture,
    Chicken,
  } from '@element-plus/icons-vue'

  const props = defineProps({
    value: {
      type: Array,
      default() {
        return []
      },
    },
    xuhao: {
      type: Number,
      default() {
        return 0
      },
    },
  })

  const state = reactive({
    isDefault: false,
  })

  const test = () => {
    console.log(props.value)
  }

  // watch(
  //   () => props.value.length,
  //   () => {
  //     if (props.value.length > 0) {
  //       if (props.value[props.xuhao].isDefault === 1) {
  //         state.isDefault = true
  //       }
  //     }
  //   }
  // )
</script>

<style lang="scss" scoped>
  .morenQuyu {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cell-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
